<template>
	<div class="panel bar">
		<!-- 设备总数图表 -->
		<h2>全国用户数量统计(2020)</h2>
		<div class="chart"></div>
		<div class="panel-footer"></div>
	</div>
</template>

<script>
	export default {
		mounted(){
			this.btn()
		},
		methods:{
			btn(){
				var myChart=this.$echarts.init(document.querySelector('.bar .chart'));
				var option = {
					color: ['#2f89cf'],
					tooltip: {
						trigger: 'axis',
						axisPointer: {            // 坐标轴指示器，坐标轴触发有效
							type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
						}
					},
					grid: {
						left: '0',
						top:'10 ',
						right: '0%',
						bottom: '4%',
						containLabel: true
					},
					xAxis: [
						{
							type: 'category',
							data: ['上海', '广州', '北京','深圳','合肥','潍坊','杭州'],
							axisTick: {
								alignWithLabel: true
							},
							axisLabel:{
								color:'rgba(255,255,255,.6)',
								fontSize:'12'
							},
							axisLine:{
								show:false,
							}
						}
					],
					yAxis: [
						{
							type: 'value',
							axisLabel:{
								color:'rgba(255,255,255,.6)',
								fontSize:'12'
							},
							axisLine:{
								lineStyle:{
									color:'rgba(255,255,255,.1)',
									width:'2'
								}
							},
							splitLine:{
								lineStyle:{
									color:'rgba(255,255,255,.1)'
								}
							}
						}
					],
					series: [
						{
							name: '数量',
							type: 'bar',
							barWidth: '60%',
							data: [950, 550, 1032, 892,236,637,231]
						}
					]
				};
				myChart.setOption(option)
				window.addEventListener('resize',function(){
					myChart.resize()
				})
			}
		}
	}
</script>

<style>
</style>
